<template>
  <div class="zj_page clearfix">
    <div class="float-left" :class="{disabled:page === 1}">
      <span class="options" @click="change_page(1)">首页</span>
      <span class="options" @click="change_page(page - 1)">上一页</span>
    </div>
    <ul class="float-left pages">
      {{page === 1 || page === all_page}}
      <li v-for="(item,index) in page_range" :key="index" @click="change_page(item)"
          :class="{active:item === page,brim:item === page && (page === 1 || page === all_page)}">{{item}}
      </li>
    </ul>
    <div class="float-left" :class="{disabled:page === all_page}">
      <span class="options" @click="change_page(page + 1)">下一页</span>
      <span class="options" @click="change_page(all_page)">尾页</span>
    </div>
  </div>
</template>

<script>
  //没时间做, 只显示5页
  export default {
    props: {
      page: {
        type: Number,
      },
      size: {
        type: Number,
      },
      total: {
        type: Number,
      },
    },
    data() {
      return {
        all_page: Math.ceil(this.total / this.size),
      };
    },
    methods: {
      change_page(p) {
        if (p === '...') return;
        this.$emit('on-page-change', p);
      },
    },
    computed: {
      page_range() {
        const p = this.page
        if (p === '...') return;
        const ap = this.all_page = Math.ceil(this.total / this.size);
        if (ap <= 7) return ap;
        if (p < 7) {
          return [1, 2, 3, 4, 5, 6, 7, '...', ap];
        } else if (ap - p >= 7) {
          return [1, '...', p - 4, p - 3, p - 2, p - 1, p, p + 1, p + 2, p + 3, p + 4, '...', ap];
        } else {
          return [1, '...', ap - 7, ap - 6, ap - 5, ap - 4, ap - 3, ap - 2, ap - 1, ap];
        }
      },
    },
    created() {
    },
  };
</script>

<style scoped lang="scss">
  .zj_page {
    font-size: 14px;
    line-height: 48px;
    .disabled {
      .options {
        color: #C8CDD2;
        pointer-events: none;
      }
    }
    .options {
      margin-right: 10px;
      cursor: pointer;
    }
    .pages {
      height: 48px;
      margin-right: 10px;
      font-size: 0;
      li {
        display: inline-block;
        width: 48px;
        height: 48px;
        // border-radius: 50%;
        text-align: center;
        font-size: 14px;
        line-height: 48px;
        cursor: pointer;
        &.active {
          background-color: #FF6900;
           color:#fff;
        }
        &.brim {
          color:#fff;
          background-color: #FF6900 !important;
        }
      }
    }
  }
</style>
